<template>
  <el-card>
    <div>
      <el-descriptions
        title="我的信息"
        class="margin-top"
        :column="1"
        :size="large"
        border
      >
        <template #extra>
          <el-button type="primary" @click="handleDialogValue"
            >修改信息</el-button
          >
        </template>
        <el-descriptions-item label="姓名">{{
          data.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机">{{
          useraccount
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          data.email
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证">{{
          data.idnumber
        }}</el-descriptions-item>
        <el-divider />
      </el-descriptions>
    </div>
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    v-if="dialogVisible"
    @initDatas="initDatas"
    :dialogTableValue="dialogTableValue"
  />
</template>

<script setup>
import { ref } from 'vue'
import Dialog from './components/dialog.vue'
import { getMyInfo } from '@/api/myinfo'
const dialogTitle = ref('')
const dialogVisible = ref(false)
const dialogTableValue = ref({})
const data = ref({})
const userData = JSON.parse(localStorage.getItem('UserInfo'))
const useraccount = JSON.parse(localStorage.getItem('useraccount'))
const handleDialogValue = () => {
  dialogTitle.value = '编辑个人信息'
  dialogVisible.value = true
  dialogTableValue.value = {
    name: data.value.name,
    account: useraccount,
    idnumber: data.value.idnumber,
    email: data.value.email
  }
}
const initDatas = async () => {
  const res = await getMyInfo(useraccount)
  data.value = res.data.datas[0]
}
initDatas()
</script>

<style></style>